<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="css/slider.css"/>
    <link rel="stylesheet" href="css/viewer.min.css"/>
</head>
<body style="padding:0px; margin:0px; background-color:#fff;font-family:helvetica, arial, verdana, sans-serif">


<div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 800px; height: 456px; overflow: hidden; visibility: hidden; background-color: #24262e;">
    <!-- Loading Screen -->
    <div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
        <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
        <div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
    </div>
    <div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 800px; height: 356px; overflow: hidden;">
        <div data-p="144.50" style="display: none;">
            <img data-u="image" src="img/01.jpg" />
            <img data-u="thumb" src="img/thumb-01.jpg" />
        </div>
        <div data-p="144.50" style="display: none;">
            <img data-u="image" src="img/02.jpg" />
            <img data-u="thumb" src="img/thumb-02.jpg" />
        </div>
        <div data-p="144.50" style="display: none;">
            <img data-u="image" src="img/03.jpg" />
            <img data-u="thumb" src="img/thumb-03.jpg" />
        </div>
        <div data-p="144.50" style="display: none;">
            <img data-u="image" src="img/04.jpg" />
            <img data-u="thumb" src="img/thumb-04.jpg" />
        </div>
        <div data-p="144.50" style="display: none;">
            <img data-u="image" src="img/05.jpg" />
            <img data-u="thumb" src="img/thumb-05.jpg" />
        </div>
        <div data-p="144.50" style="display: none;">
            <img data-u="image" src="img/06.jpg" />
            <img data-u="thumb" src="img/thumb-06.jpg" />
        </div>
        <div data-p="144.50" style="display: none;">
            <img data-u="image" src="img/07.jpg" />
            <img data-u="thumb" src="img/thumb-07.jpg" />
        </div>
        <div data-p="144.50" style="display: none;">
            <img data-u="image" src="img/08.jpg" />
            <img data-u="thumb" src="img/thumb-08.jpg" />
        </div>
        <div data-p="144.50" style="display: none;">
            <img data-u="image" src="img/09.jpg" />
            <img data-u="thumb" src="img/thumb-09.jpg" />
        </div>
        <a data-u="any" href="http://www.jssor.com" style="display:none">Image Gallery</a>
        <div data-p="144.50" style="display: none;">
            <img data-u="image" src="img/10.jpg" />
            <img data-u="thumb" src="img/thumb-10.jpg" />
        </div>
        <div data-p="144.50" style="display: none;">
            <img data-u="image" src="img/11.jpg" />
            <img data-u="thumb" src="img/thumb-11.jpg" />
        </div>
        <div data-p="144.50" style="display: none;">
            <img data-u="image" src="img/12.jpg" />
            <img data-u="thumb" src="img/thumb-12.jpg" />
        </div>
    </div>
    <!-- Thumbnail Navigator -->
    <div data-u="thumbnavigator" class="jssort01" style="position:absolute;left:0px;bottom:0px;width:800px;height:100px;" data-autocenter="1">
        <!-- Thumbnail Item Skin Begin -->
        <div data-u="slides" style="cursor: default;">
            <div data-u="prototype" class="p">
                <div class="w">
                    <div data-u="thumbnailtemplate" class="t"></div>
                </div>
                <div class="c"></div>
            </div>
        </div>
        <!-- Thumbnail Item Skin End -->
    </div>
    <!-- Arrow Navigator -->
    <span data-u="arrowleft" class="jssora05l" style="top:158px;left:8px;width:40px;height:40px;"></span>
    <span data-u="arrowright" class="jssora05r" style="top:158px;right:8px;width:40px;height:40px;"></span>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jssor.slider-21.1.6.min.js" type="text/javascript"></script>
<script src="js/slider.js"></script>
<script src="js/viewer.min.js"></script>
<script type="text/javascript">
    jssor_1_slider_init(jssor_1);
    $('#jssor_1').viewer({url:function(url){
        url = url+"";
        if(url.indexOf("thumb")>-1){
            return false;
        }
    }});
</script>
<!-- #endregion Jssor Slider End -->
</body>
</html>
